<script setup lang="ts">
import { SignalFilled } from '@ant-design/icons-vue';
// 测试数据
const data = [
  {
    id: 1,
    title: '多功能集成式开发者平台 appwrite',
  },
  {
    id: 2,

    title: '股票与加密市场的得力助手 openbb 终端',
  },
  {
    id: 3,

    title: '网易云音乐专属的 node.js api 服务',
  },
  {
    id: 4,
    title: '财政 IT 系统的深度变革与广阔前景',
  },
  {
    id: 5,
    title: '华为全产业链的创新浪潮与无限机遇',
  },
]
</script>
<template>
  <!-- 这里是热榜组件 -->
  <div class="hot-rank">
    <educ-dynamic-hot-title title="本周热榜" :icon="SignalFilled" />
    <a-list item-layout="horizontal" :data-source="data">
      <template #renderItem="{ item }">
        <a-list-item class="list-item">
          <a-list-item-meta>
            <template #title>
              <a href="#">{{ item.title }}</a>
            </template>
            <template #avatar>
              <p class="list-id">{{ item.id }}</p>
            </template>
            <template #description>
              <span class="span">1864回复</span>
              <span class="span">2024-10-31-11:24:28</span>
            </template>
          </a-list-item-meta>
          <p class="span"><span class="span-av">1234</span>热度</p>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>



<style lang="scss" scoped>
.hot-rank {
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: #fff;
  border-radius: .5rem;

  .list-item {
    padding: .75rem 0;

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .list-id {
    color: $educ-color-primary;
  }

  .span {
    padding-right: .625rem;
    font-size: .625rem;

    .span-av {
      padding-right: .125rem;
      color: $educ-color-primary;
    }
  }
}



@media screen and (width <=62rem) {
  .span {
    display: none;
  }
}
</style>
